<template>
<div id="userInfo">
    <Modal v-model="userInfoSta.userInfoSta" title="个人信息">
        <Form :model="userInfoForm" label-position="right" :label-width="100">
            <Row>
                <Col :xs="{ span: 12}" :lg="{ span: 12}">
                <FormItem label="姓名:">
                    <Input v-model="userInfoForm.name" disabled></Input>
                </FormItem>
                <FormItem label="性别:">
                    <Input v-model="userInfoForm.sex" disabled></Input>
                </FormItem>
                <FormItem label="电话:">
                    <Input v-model="userInfoForm.tel" disabled></Input>
                </FormItem>
                <FormItem label="权限级别:">
                    <Input v-model="userInfoForm.level" disabled></Input>
                </FormItem>
                <FormItem label="邮箱:">
                    <Input v-model="userInfoForm.mail" disabled></Input>
                </FormItem>
                <FormItem label="备案地址:">
                    <Input v-model="userInfoForm.address" disabled></Input>
                </FormItem>
                </Col>
                <Col :xs="{ span: 12}" :lg="{ span: 12}">
                <FormItem label="账号:">
                    <Input v-model="userInfoForm.number" disabled></Input>
                </FormItem>
                <FormItem label="部门:">
                    <Input v-model="userInfoForm.department" disabled></Input>
                </FormItem>
                <FormItem label="地域组织:">
                    <Input v-model="userInfoForm.organize" disabled></Input>
                </FormItem>
                <FormItem label="办公环境:">
                    <Input v-model="userInfoForm.environment" disabled></Input>
                </FormItem>
                <FormItem label="进入公司年份:">
                    <Input v-model="userInfoForm.year" disabled></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>
    </Modal>
</div>
</template>
<script>
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    Input
} from 'iview'

import {
    mapState
} from 'vuex'

export default {
    created() {
        this.$axios.post('/userInfo').then((res) => {
            this.userInfoForm.name = res.data.name;
            this.userInfoForm.sex = res.data.sex;
            this.userInfoForm.tel = res.data.tel
            this.userInfoForm.level = res.data.level;
            this.userInfoForm.mail = res.data.mail
            this.userInfoForm.address = res.data.address;
            this.userInfoForm.number = res.data.number;
            this.userInfoForm.department = res.data.department;
            this.userInfoForm.organize = res.data.organize;
            this.userInfoForm.environment = res.data.environment;
            this.userInfoForm.year = res.data.year;
        })
    },
    data() {
        return {
            userInfoForm: {
                name: '',
                sex: '',
                tel: '',
                level: '',
                mail: '',
                address: '',
                number: '',
                department: '',
                organize: '',
                environment: '',
                year: ''
            }
        }
    },
    computed: {
        ...mapState({
            'userInfoSta': state => state.userInfo
        })
    },
    methods: {},
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        Input
    }
}
</script>
